<template>
    <div class="A_con">
        <!-- <router-view></router-view> -->
        <userID></userID>
        <NavigationBar></NavigationBar>
        <div class="all">
            <!-- 分类头部 -->
                <ul class="Class_top">
                    <li>首页</li>
                    <li>&gt;</li>
                    <li>{{$route.query.name }}</li>
                </ul>
            <!-- 分类轮播 -->
                <Swiper></Swiper>
            <!-- 全部分类部分 -->
            <div class="All_1">
                    <h3>全部分类</h3>
                    <ul class="All_list">
                        <li v-for="item in ClassList" :key="item.id">
                            <img  v-lazy=item.picture alt="">
                            <p>{{item.name}}</p>
                        </li>
                    </ul>
            </div>
            <div v-for="(item,index) in ClassList" :key="index">
                <div class="All_class" >
                    <h3>- {{item.name}} -</h3>
                    <!-- <p class="All_p1">1111</p> -->
                    
                    <ul class="list" >
                        <AllClassList v-for="(i,index) in item.goods" :key="index"  :item="i"></AllClassList>
                    </ul>
                </div>
            </div>
        
        </div>
        <bottom></bottom>
    </div>
</template>

<script>
import Swiper from '@/views/classification/comms/Swiper.vue'
import AllClassList from '@/views/classification/comms/AllClassList.vue'
import NavigationBar from '@/components/NavigationBar.vue'
import bottom from '@/components/bottom.vue'
import userID from '@/components/userID.vue'
export default {
    name:'ClassiFication',
    data(){
        return{
            ClassList:[],
            id:this.$route.query.id,
            name:''
        }
    },
    components:{
        Swiper,
        AllClassList,
        NavigationBar,
        userID,
        bottom
    },
    watch:{
        $route:{
            handler(val){
                console.log(val.query);//新路由信息
                this.$.getCateList({id:val.query.id}).then((res)=>{
                    this.ClassList=res.data.result.children
                })
            },
            immediate:true
        }
    },
    mounted(){
        // this.bus.$on('itemFn',(res)=>{
        //     console.log(res.childList);
        //     res.childList.forEach(item => {
        //         this.name=item.name
        //         // console.log( this.name);
        //     });
        // })
    },
    methods:{
         
    }
}
</script>

<style lang="less" scoped>
.A_con{
    width: 100%;
    background: #f5f5f5;
    .all{
        width: 1240px;
        margin: 0 auto;
       
        .Class_top{
            display: flex;
            list-style: none;
            color: #666;
            background: #f5f5f5;
            font-size: 14px;
            padding: 25px 10px;
            box-sizing: border-box;
            align-items: center;
            li{
                margin-right: 10px;
                &:last-child{
                    color: #333;
                }
            }
        }
        .All_1{
            width: 100%;
            margin-top: 21px;
            background: #fff;
            h3{
                font-size: 28px;
                color: #666;
                font-weight: 400;
                text-align: center;
                line-height: 100px;
            }
            .All_list{
                width: 100%;
                display: flex;
                list-style: none;
                padding: 0 32px;
                box-sizing: border-box;
                margin-top: 20px;
                li{
                    width: 168px;
                    height: 160px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    // background: red;
                    img{
                        width: 100px;
                        height: 100px;
                    }
                    p{
                        line-height: 40px;
                        font-size: 16px;
                    }
                    p:hover{
                        color: #27ba9b;
                    }
                }
            }   
        }
        .All_class{
            width: 100%;
            margin-top: 21px;
            background: #fff;
            h3{
                font-size: 28px;
                color: #666;
                font-weight: 400;
                text-align: center;
                line-height: 100px;
            }
            // .All_p1{
            //     text-align: center;
            //     color: #999;
            //     font-size: 20px;
            // }
           
            .list{
                width: 100%;
                display: flex;
                list-style: none;
                padding: 0 32px;
                box-sizing: border-box;
                // margin-top: 20px;
            }
        }
    }

}
  
</style>    